<template>
  <div class="weight-tracking">
    <!-- 顶部状态栏 -->
    <div class="status-bar">
      <div class="status-left">9:41</div>
      <div class="status-right">
        <div class="signal"></div>
        <div class="wifi"></div>
        <div class="battery"></div>
      </div>
    </div>

    <!-- 头部导航 -->
    <div class="header">
      <div class="back-button" @click="goBack">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
          <path d="M19 12H5M12 19l-7-7 7-7"/>
        </svg>
      </div>
      <h1 class="title">体重</h1>
      <div class="header-actions">
        <div class="add-button" @click="showAddWeight = true">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
            <line x1="12" y1="5" x2="12" y2="19"/>
            <line x1="5" y1="12" x2="19" y2="12"/>
          </svg>
        </div>
      </div>
    </div>

    <!-- 时间筛选标签 -->
    <div class="time-tabs">
      <div
        v-for="tab in timeTabs"
        :key="tab.key"
        :class="['time-tab', { active: activeTimeTab === tab.key }]"
        @click="setTimeTab(tab.key)"
      >
        {{ tab.label }}
      </div>
    </div>

    <!-- 体重圆环 -->
    <div class="weight-circle">
      <div class="circle-container">
        <svg class="progress-ring" width="200" height="200">
          <circle
            class="progress-ring-bg"
            stroke="#2A2A2A"
            stroke-width="8"
            fill="transparent"
            r="90"
            cx="100"
            cy="100"
          />
          <circle
            class="progress-ring-progress"
            stroke="url(#weightGradient)"
            stroke-width="8"
            fill="transparent"
            r="90"
            cx="100"
            cy="100"
            :stroke-dasharray="circumference"
            :stroke-dashoffset="strokeDashoffset"
            stroke-linecap="round"
          />
          <defs>
            <linearGradient id="weightGradient" x1="0%" y1="0%" x2="100%" y2="0%">
              <stop offset="0%" style="stop-color:#4CAF50"/>
              <stop offset="100%" style="stop-color:#8BC34A"/>
            </linearGradient>
          </defs>
        </svg>
        <div class="circle-content">
          <div class="current-weight">{{ currentWeight }}</div>
          <div class="weight-unit">kg</div>
          <div class="target-weight">目标: {{ targetWeight }}kg</div>
          <div class="scale-icon">
            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
              <path d="M3 6h18"/>
              <path d="M3 10h18"/>
              <path d="M3 14h18"/>
              <path d="M3 18h18"/>
              <path d="M7 6v12"/>
              <path d="M17 6v12"/>
            </svg>
          </div>
        </div>
      </div>
    </div>

    <!-- 额外指标 -->
    <div class="additional-metrics">
      <div class="metric-item">
        <div class="metric-icon fat-rate">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <circle cx="12" cy="12" r="10"/>
            <path d="M8 14s1.5 2 4 2 4-2 4-2"/>
            <line x1="9" y1="9" x2="9.01" y2="9"/>
            <line x1="15" y1="9" x2="15.01" y2="9"/>
          </svg>
        </div>
        <div class="metric-content">
          <div class="metric-value">{{ fatRate }}%</div>
          <div class="metric-label">体脂率</div>
        </div>
      </div>
      <div class="metric-item">
        <div class="metric-icon bmi">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M12 2L2 7l10 5 10-5-10-5z"/>
            <path d="M2 17l10 5 10-5"/>
            <path d="M2 12l10 5 10-5"/>
          </svg>
        </div>
        <div class="metric-content">
          <div class="metric-value">{{ bmi }}</div>
          <div class="metric-label">BMI</div>
        </div>
      </div>
      <div class="metric-item">
        <div class="metric-icon change">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M7 10l5 5 5-5"/>
            <path d="M12 15V3"/>
          </svg>
        </div>
        <div class="metric-content">
          <div class="metric-value" :class="weightChangeClass">{{ weightChange }}</div>
          <div class="metric-label">本周变化</div>
        </div>
      </div>
    </div>

    <!-- 体重趋势图 -->
    <div class="weight-trend">
      <h3 class="trend-title">体重趋势</h3>
      <div class="trend-chart">
        <svg width="100%" height="120" viewBox="0 0 300 120">
          <!-- 背景网格 -->
          <defs>
            <pattern id="grid" width="50" height="20" patternUnits="userSpaceOnUse">
              <path d="M 50 0 L 0 0 0 20" fill="none" stroke="#2A2A2A" stroke-width="0.5"/>
            </pattern>
          </defs>
          <rect width="100%" height="100%" fill="url(#grid)"/>
          
          <!-- 体重曲线 -->
          <path
            :d="weightPath"
            fill="none"
            stroke="url(#weightLineGradient)"
            stroke-width="3"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
          
          <!-- 体重区域 -->
          <path
            :d="weightAreaPath"
            fill="url(#weightAreaGradient)"
            opacity="0.3"
          />
          
          <!-- 数据点 -->
          <circle
            v-for="(point, index) in weeklyData"
            :key="index"
            :cx="point.x"
            :cy="point.y"
            r="3"
            fill="#4CAF50"
            stroke="white"
            stroke-width="1"
          />
          
          <defs>
            <linearGradient id="weightLineGradient" x1="0%" y1="0%" x2="100%" y2="0%">
              <stop offset="0%" style="stop-color:#4CAF50"/>
              <stop offset="100%" style="stop-color:#8BC34A"/>
            </linearGradient>
            <linearGradient id="weightAreaGradient" x1="0%" y1="0%" x2="0%" y2="100%">
              <stop offset="0%" style="stop-color:#4CAF50" stop-opacity="0.6"/>
              <stop offset="100%" style="stop-color:#4CAF50" stop-opacity="0.1"/>
            </linearGradient>
          </defs>
        </svg>
        
        <!-- X轴标签 -->
        <div class="chart-labels">
          <div
            v-for="(day, index) in weekDays"
            :key="index"
            class="chart-label"
          >
            {{ day }}
          </div>
        </div>
      </div>
    </div>

    <!-- 历史记录 -->
    <div class="history-section">
      <h3 class="history-title">历史记录</h3>
      <div class="history-list">
        <div
          v-for="record in historyRecords"
          :key="record.id"
          class="history-item"
        >
          <div class="history-date">
            <div class="date">{{ record.date }}</div>
            <div class="day">{{ record.day }}</div>
          </div>
          <div class="history-weight">
            <div class="weight-value">{{ record.weight }}kg</div>
            <div class="weight-change" :class="record.changeClass">{{ record.change }}</div>
          </div>
          <div class="history-fat">
            <div class="fat-rate">{{ record.fatRate }}%</div>
            <div class="fat-change" :class="record.fatChangeClass">{{ record.fatChange }}</div>
          </div>
          <div class="history-status">
            <div class="status-icon" :class="record.status">
              <svg v-if="record.status === 'good'" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <polyline points="20,6 9,17 4,12"/>
              </svg>
              <svg v-else-if="record.status === 'warning'" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
                <line x1="12" y1="9" x2="12" y2="13"/>
                <line x1="12" y1="17" x2="12.01" y2="17"/>
              </svg>
              <svg v-else width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <circle cx="12" cy="12" r="10"/>
                <line x1="15" y1="9" x2="9" y2="15"/>
                <line x1="9" y1="9" x2="15" y2="15"/>
              </svg>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 添加体重弹窗 -->
    <div class="modal-overlay" v-if="showAddWeight" @click="showAddWeight = false">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>添加体重记录</h3>
          <div class="close-button" @click="showAddWeight = false">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <line x1="18" y1="6" x2="6" y2="18"/>
              <line x1="6" y1="6" x2="18" y2="18"/>
            </svg>
          </div>
        </div>
        <div class="modal-body">
          <div class="input-group">
            <label>体重 (kg)</label>
            <input
              v-model="newWeight"
              type="number"
              step="0.1"
              placeholder="请输入体重"
              class="weight-input"
            />
          </div>
          <div class="input-group">
            <label>体脂率 (%)</label>
            <input
              v-model="newFatRate"
              type="number"
              step="0.1"
              placeholder="请输入体脂率"
              class="fat-input"
            />
          </div>
        </div>
        <div class="modal-footer">
          <button class="cancel-button" @click="showAddWeight = false">取消</button>
          <button class="confirm-button" @click="addWeightRecord">确认</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 响应式数据
const activeTimeTab = ref('day')
const currentWeight = ref(65.2)
const targetWeight = ref(60.0)
const fatRate = ref(18.5)
const bmi = ref(22.1)
const weightChange = ref('-0.3kg')
const showAddWeight = ref(false)
const newWeight = ref('')
const newFatRate = ref('')

// 时间标签
const timeTabs = [
  { key: 'day', label: '日' },
  { key: 'week', label: '周' },
  { key: 'month', label: '月' }
]

// 周数据
const weekDays = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
const weeklyData = ref([
  { x: 25, y: 80, weight: 65.5 },
  { x: 75, y: 75, weight: 65.3 },
  { x: 125, y: 70, weight: 65.0 },
  { x: 175, y: 65, weight: 64.8 },
  { x: 225, y: 60, weight: 64.5 },
  { x: 275, y: 55, weight: 64.2 },
  { x: 325, y: 50, weight: 64.0 }
])

// 历史记录
const historyRecords = ref([
  {
    id: 1,
    date: '12/15',
    day: '今天',
    weight: 64.0,
    change: '-0.2kg',
    changeClass: 'down',
    fatRate: 18.2,
    fatChange: '-0.1%',
    fatChangeClass: 'down',
    status: 'good'
  },
  {
    id: 2,
    date: '12/14',
    day: '昨天',
    weight: 64.2,
    change: '-0.3kg',
    changeClass: 'down',
    fatRate: 18.3,
    fatChange: '-0.2%',
    fatChangeClass: 'down',
    status: 'good'
  },
  {
    id: 3,
    date: '12/13',
    day: '前天',
    weight: 64.5,
    change: '+0.1kg',
    changeClass: 'up',
    fatRate: 18.5,
    fatChange: '+0.1%',
    fatChangeClass: 'up',
    status: 'warning'
  },
  {
    id: 4,
    date: '12/12',
    day: '周三',
    weight: 64.4,
    change: '-0.1kg',
    changeClass: 'down',
    fatRate: 18.4,
    fatChange: '-0.1%',
    fatChangeClass: 'down',
    status: 'good'
  },
  {
    id: 5,
    date: '12/11',
    day: '周二',
    weight: 64.5,
    change: '-0.2kg',
    changeClass: 'down',
    fatRate: 18.5,
    fatChange: '-0.2%',
    fatChangeClass: 'down',
    status: 'good'
  }
])

// 计算属性
const circumference = computed(() => 2 * Math.PI * 90)

const strokeDashoffset = computed(() => {
  const progress = (currentWeight.value / targetWeight.value) * 100
  const offset = circumference.value - (progress / 100) * circumference.value
  return Math.max(0, Math.min(offset, circumference.value))
})

const weightChangeClass = computed(() => {
  return weightChange.value.includes('-') ? 'down' : 'up'
})

const weightPath = computed(() => {
  if (weeklyData.value.length === 0) return ''
  
  const points = weeklyData.value.map(point => `${point.x},${point.y}`)
  return `M ${points.join(' L ')}`
})

const weightAreaPath = computed(() => {
  if (weeklyData.value.length === 0) return ''
  
  const points = weeklyData.value.map(point => `${point.x},${point.y}`)
  const lastPoint = weeklyData.value[weeklyData.value.length - 1]
  const firstPoint = weeklyData.value[0]
  
  return `M ${points.join(' L ')} L ${lastPoint.x},120 L ${firstPoint.x},120 Z`
})

// 方法
const goBack = () => {
  router.back()
}

const setTimeTab = (tab: string) => {
  activeTimeTab.value = tab
  updateDataByTimeTab(tab)
}

const updateDataByTimeTab = (tab: string) => {
  // 根据时间标签更新数据
  if (tab === 'day') {
    currentWeight.value = 64.0
    fatRate.value = 18.2
    bmi.value = 22.1
    weightChange.value = '-0.2kg'
  } else if (tab === 'week') {
    currentWeight.value = 64.0
    fatRate.value = 18.2
    bmi.value = 22.1
    weightChange.value = '-0.3kg'
  } else if (tab === 'month') {
    currentWeight.value = 64.0
    fatRate.value = 18.2
    bmi.value = 22.1
    weightChange.value = '-1.2kg'
  }
}

const addWeightRecord = () => {
  if (newWeight.value && newFatRate.value) {
    const weight = parseFloat(newWeight.value)
    const fat = parseFloat(newFatRate.value)
    
    // 更新当前数据
    currentWeight.value = weight
    fatRate.value = fat
    bmi.value = calculateBMI(weight, 170) // 假设身高170cm
    
    // 添加到历史记录
    const today = new Date()
    const yesterday = new Date(today)
    yesterday.setDate(yesterday.getDate() - 1)
    
    const newRecord = {
      id: historyRecords.value.length + 1,
      date: `${(today.getMonth() + 1).toString().padStart(2, '0')}/${today.getDate().toString().padStart(2, '0')}`,
      day: '今天',
      weight: weight,
      change: calculateChange(weight, historyRecords.value[0]?.weight || weight),
      changeClass: weight < (historyRecords.value[0]?.weight || weight) ? 'down' : 'up',
      fatRate: fat,
      fatChange: calculateFatChange(fat, historyRecords.value[0]?.fatRate || fat),
      fatChangeClass: fat < (historyRecords.value[0]?.fatRate || fat) ? 'down' : 'up',
      status: weight < (historyRecords.value[0]?.weight || weight) ? 'good' : 'warning'
    }
    
    historyRecords.value.unshift(newRecord)
    
    // 清空输入
    newWeight.value = ''
    newFatRate.value = ''
    showAddWeight.value = false
  }
}

const calculateBMI = (weight: number, height: number) => {
  const heightInMeters = height / 100
  return (weight / (heightInMeters * heightInMeters)).toFixed(1)
}

const calculateChange = (current: number, previous: number) => {
  const change = current - previous
  return change > 0 ? `+${change.toFixed(1)}kg` : `${change.toFixed(1)}kg`
}

const calculateFatChange = (current: number, previous: number) => {
  const change = current - previous
  return change > 0 ? `+${change.toFixed(1)}%` : `${change.toFixed(1)}%`
}

onMounted(() => {
  updateDataByTimeTab('day')
})
</script>

<style scoped lang="scss">
.weight-tracking {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 20px;
  font-size: 14px;
  font-weight: 600;
  
  .status-right {
    display: flex;
    align-items: center;
    gap: 4px;
    
    .signal, .wifi, .battery {
      width: 16px;
      height: 8px;
      background: white;
      border-radius: 2px;
    }
  }
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  
  .back-button {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    
    &:hover {
      background: rgba(255, 255, 255, 0.2);
    }
  }
  
  .title {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
  }
  
  .header-actions {
    display: flex;
    gap: 8px;
    
    .add-button {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 50%;
      cursor: pointer;
      transition: all 0.3s ease;
      
      &:hover {
        background: rgba(255, 255, 255, 0.2);
      }
    }
  }
}

.time-tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 0 20px 20px;
  
  .time-tab {
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    
    &.active {
      background: rgba(255, 255, 255, 0.2);
      font-weight: 600;
    }
    
    &:hover {
      background: rgba(255, 255, 255, 0.15);
    }
  }
}

.weight-circle {
  display: flex;
  justify-content: center;
  padding: 20px;
  
  .circle-container {
    position: relative;
    width: 200px;
    height: 200px;
    
    .progress-ring {
      transform: rotate(-90deg);
      
      .progress-ring-bg {
        transition: stroke-dashoffset 0.5s ease;
      }
      
      .progress-ring-progress {
        transition: stroke-dashoffset 0.5s ease;
      }
    }
    
    .circle-content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      
      .current-weight {
        font-size: 32px;
        font-weight: 700;
        line-height: 1;
      }
      
      .weight-unit {
        font-size: 14px;
        opacity: 0.8;
        margin-top: 4px;
      }
      
      .target-weight {
        font-size: 12px;
        opacity: 0.7;
        margin-top: 8px;
      }
      
      .scale-icon {
        margin-top: 8px;
        opacity: 0.6;
      }
    }
  }
}

.additional-metrics {
  display: flex;
  justify-content: space-around;
  padding: 0 20px 20px;
  
  .metric-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    
    .metric-icon {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      
      &.fat-rate {
        background: linear-gradient(135deg, #FF6B6B, #FF8E8E);
      }
      
      &.bmi {
        background: linear-gradient(135deg, #4ECDC4, #44A08D);
      }
      
      &.change {
        background: linear-gradient(135deg, #A8E6CF, #88D8C0);
      }
    }
    
    .metric-content {
      .metric-value {
        font-size: 18px;
        font-weight: 600;
        line-height: 1;
        
        &.down {
          color: #4CAF50;
        }
        
        &.up {
          color: #FF6B6B;
        }
      }
      
      .metric-label {
        font-size: 12px;
        opacity: 0.8;
        margin-top: 2px;
      }
    }
  }
}

.weight-trend {
  padding: 0 20px 20px;
  
  .trend-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 16px 0;
  }
  
  .trend-chart {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 16px;
    backdrop-filter: blur(10px);
    
    .chart-labels {
      display: flex;
      justify-content: space-between;
      margin-top: 8px;
      
      .chart-label {
        font-size: 12px;
        opacity: 0.7;
        text-align: center;
        flex: 1;
      }
    }
  }
}

.history-section {
  padding: 0 20px 20px;
  
  .history-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 16px 0;
  }
  
  .history-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    
    .history-item {
      display: flex;
      align-items: center;
      padding: 16px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 12px;
      backdrop-filter: blur(10px);
      
      .history-date {
        flex: 1;
        
        .date {
          font-size: 14px;
          font-weight: 600;
        }
        
        .day {
          font-size: 12px;
          opacity: 0.7;
          margin-top: 2px;
        }
      }
      
      .history-weight {
        flex: 1;
        text-align: center;
        
        .weight-value {
          font-size: 16px;
          font-weight: 600;
        }
        
        .weight-change {
          font-size: 12px;
          margin-top: 2px;
          
          &.down {
            color: #4CAF50;
          }
          
          &.up {
            color: #FF6B6B;
          }
        }
      }
      
      .history-fat {
        flex: 1;
        text-align: center;
        
        .fat-rate {
          font-size: 14px;
          font-weight: 600;
        }
        
        .fat-change {
          font-size: 12px;
          margin-top: 2px;
          
          &.down {
            color: #4CAF50;
          }
          
          &.up {
            color: #FF6B6B;
          }
        }
      }
      
      .history-status {
        .status-icon {
          width: 24px;
          height: 24px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
          
          &.good {
            background: rgba(76, 175, 80, 0.2);
            color: #4CAF50;
          }
          
          &.warning {
            background: rgba(255, 193, 7, 0.2);
            color: #FFC107;
          }
          
          &.bad {
            background: rgba(244, 67, 54, 0.2);
            color: #F44336;
          }
        }
      }
    }
  }
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  
  .modal-content {
    background: white;
    border-radius: 16px;
    width: 90%;
    max-width: 400px;
    color: #333;
    
    .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px;
      border-bottom: 1px solid #eee;
      
      h3 {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
      }
      
      .close-button {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        cursor: pointer;
        transition: background-color 0.3s ease;
        
        &:hover {
          background: #f5f5f5;
        }
      }
    }
    
    .modal-body {
      padding: 20px;
      
      .input-group {
        margin-bottom: 16px;
        
        label {
          display: block;
          font-size: 14px;
          font-weight: 500;
          margin-bottom: 8px;
          color: #666;
        }
        
        input {
          width: 100%;
          padding: 12px;
          border: 1px solid #ddd;
          border-radius: 8px;
          font-size: 16px;
          transition: border-color 0.3s ease;
          
          &:focus {
            outline: none;
            border-color: #667eea;
          }
        }
      }
    }
    
    .modal-footer {
      display: flex;
      gap: 12px;
      padding: 20px;
      border-top: 1px solid #eee;
      
      button {
        flex: 1;
        padding: 12px;
        border: none;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
        
        &.cancel-button {
          background: #f5f5f5;
          color: #666;
          
          &:hover {
            background: #e0e0e0;
          }
        }
        
        &.confirm-button {
          background: linear-gradient(135deg, #667eea, #764ba2);
          color: white;
          
          &:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
          }
        }
      }
    }
  }
}
</style> 